<template>
  <div class="asidePanel">
    <div style="margin-top: 20px; height: 200px;">
        <el-collapse-transition>
            <div class="transition-box" v-show="ShowArrays[0]">
                <el-tree
                style="padding:10px"
                    :data="data"
                    show-checkbox
                    node-key="id"
                   @check-change= "treeCallBack"
                   ref="tree"
                    :default-expanded-keys="[]"
                    :default-checked-keys="defaultTree"
                    :props="defaultProps">
                </el-tree>
          </div>
        <!-- <div v-show="show3">
          <div class="transition-box">el-collapse-transition</div>
        </div> -->
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
import {data} from '../map/treeConfig'
import {changeImageLayer} from '../map/mapHandle'
    export default {
        name:'asidePanel',
        props:{
            showArrys:{type:Array}
        },
        computed:{
            ShowArrays(){
                return this.$props.showArrys;
            }
        },
        data(){
            return {
                show3: true,
                data,
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                defaultTree:[],
            }
        },
        created(){
            window['defaultTree'] = [51,31];
            this.defaultTree = window['defaultTree'];
        },
        methods:{
            treeCallBack(data, checked,dd) {
                let id = data.id;
                let flag = checked;
                if(id > 9){
                    //子节点
                    changeImageLayer(id,checked);
                }
                //取出选中的子id
                console.log(data, checked,dd);
                return false;
                let tmpArr = [];
                if(data.children){
                    //判断children是否在window对象里面
                    let childrenArrs = [];
                    data.children.forEach((item)=>{
                        childrenArrs.push(item.id);
                    })
                    console.log(data,data.children,data.id);
                    //let clearNodeId = this.unique(window['defaultTree'],childrenArrs);
                    tmpArr.push(childrenArrs);
                }else{
                    //直接添加
                    tmpArr.push(data.id);
                }
                changeImageLayer(tmpArr);
                
            },
            unique(arr2,arr1){
                arr2.forEach((item2)=>{
                    arr1.forEach((item1,index)=>{
                            if(item2 == item1){
                                arr1.splice(index,1);
                            }
                    })
                })
                return arr1;
            },
            initTree(){
                this.$refs.tree.setCheckedKeys([51,31]);
            }
        }
    }
</script>

<style>
.asidePanel{
   position: fixed;
    top: 10%;
    left: 6%; 
}
.transition-box {
    margin-bottom: 10px;
    width: 300px;
    /* height: 350px; */
    overflow-y: auto;
    border-radius: 4px;
    /* background-color: #409EFF; */
    text-align: center;
    color: #fff;
    /* padding: 10px; */
    box-sizing: border-box;
    margin-right: 20px;
  }
</style>